<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	.weui-cell{
		padding: 5px 15px;
	}
	.mui-table-view-cell {
		position: relative;
		overflow: hidden;
		padding: 8px 11px;
		-webkit-touch-callout: none;
	}
</style>
<body>

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>我的业绩</b></font></h1>
	<!--<p class="mui-pull-right mui-icon-right-nav " onclick="moreSearch()" style="color: black;font-size:15px;font-weight:900;margin-top:10px">更多查询</p>-->
</header>

<div class="mui-content">
	<div class="weui-flex" style="border-bottom:1px solid #c8c7cc;background-color: white">
		<div class="weui-flex__item" style="border-right:1px solid #c8c7cc;flex-grow: 1">
			<div class="weui-cell" id="aaa" href="javascript:;" style="padding: 0 5px;width: 100%;">
				<input th:if="${saletype==null}" type="text" id="type" value="所有" style="border: none;margin:0;font-size: 14px;text-align: center" readonly="readonly"/>
				<input th:if="${saletype!=null}" type="text" id="type" th:value="${saletype}"  style="border: none;margin:0;font-size: 14px;text-align: center" readonly="readonly"/>
				<span class="mui-icon mui-icon-arrowdown"></span>
			</div>
		</div>
		<div class="weui-flex__item" style="border-right:1px solid #c8c7cc;flex-grow: 1">
			<div class="weui-cell"  href="javascript:;" style="padding: 0 5px;width: 100%;">
				<input th:if="${choocetime==null}" type="text" id="choocetime" value="本月" style="border: none;margin:0;font-size: 14px;text-align: center" readonly="readonly"/>
				<input th:if="${choocetime!=null}" type="text" id="choocetime" th:value="${choocetime}" style="border: none;margin:0;font-size: 14px;text-align: center" readonly="readonly"/>
				<span class="mui-icon mui-icon-arrowdown"></span>
			</div>
		</div>
	</div>
	<!--<div th:each="everyMoth:${everyMoth}">
		<div class="weui-cells__title" th:text="${everyMoth.time}"></div>&lt;!&ndash;间隔一下&ndash;&gt;
		<div class="weui-cells " style="margin-top: 0px">
			<div class="weui-cell" style="line-height:1" onclick="">
				<div class="weui-cell__hd"><i class="fa fa-money" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
				<div class="weui-cell__bd">
					<span>您本月总金额:</span>
				</div>
				<div class="weui-cell__ft"><h3>￥<span th:text="${everyMoth.allsum}"></span></h3></div>
			</div>
			<div class="weui-cell" style="line-height:1" onclick="">
				<div class="weui-cell__bd" style="margin-left: 15%">
					<span style="color: lightcoral">未结算:￥</span><span th:text="${everyMoth.notgetsum}" style="color: lightcoral"></span>
				</div>
				<div class="weui-cell__bd">
					<span style="color: lightgreen">已结算:￥</span><span th:text="${everyMoth.getsum}" style="color: lightgreen"></span>
				</div>
			</div>
			<div class="weui-panel weui-panel_access">
				<div class="weui-panel__bd">
					<a href="javascript:void(0);" th:each="salelist:${salelist}" th:if="${salelist.time==everyMoth.time}" class="weui-media-box weui-media-box_appmsg">
						<div class="weui-media-box__bd">
							<h4 class="weui-media-box__title">
								<span th:text="${salelist.servitemname}"></span>(
								<span th:if="${salelist.type=='已结算'}" th:text="${salelist.type}"></span>
								<span th:if="${salelist.type!='已结算'}" style="color: red" th:text="${salelist.type}"></span>
								)</h4>
							<p class="weui-media-box__desc" th:text="${#dates.format(salelist.completetime, 'yyyy-MM-dd')}"></p>
						</div>
						<div class="weui-cell__ft"><h4>￥<span th:text="${salelist.reward}"></span></h4></div>
					</a>
				</div>
			</div>
		</div>
	</div>-->
	<div th:each="everyMoth:${everyMoth}">
		<div class="weui-cells__title"  th:text="${everyMoth.time}"></div>
		<ul class="mui-table-view mui-table-view-chevron">
			<li class="mui-table-view-cell mui-collapse" >
				<a class="mui-navigate-right" href="#" style="background-color: white">
					<div class="weui-cell" style="line-height:1" onclick="">
						<div class="weui-cell__hd"><i class="fa fa-money" style="color: black;margin-top: 5px;margin-left: 5px"></i>&nbsp;&nbsp;</div>
						<div class="weui-cell__bd">
							<span>您本月总金额:</span>
						</div>
						<div class="weui-cell__ft"><h3 style="color: green">￥<span th:text="${everyMoth.allsum}"></span></h3></div>
					</div>
					<div class="weui-cell" style="line-height:1" onclick="">
						<div class="weui-cell__bd" style="margin-left: 15%" th:if="${saletype==null||saletype=='未结算'}">
							<p><span style="color:black">未结算:￥</span><span th:text="${everyMoth.notgetsum}" style="color:red"></span></p>
						</div>
						<div class="weui-cell__bd" style="margin-left: 15%" th:if="${saletype==null||saletype=='已结算'}">
							<p><span style="color: black">已结算:￥</span><span th:text="${everyMoth.getsum}" style="color: green"></span></p>
						</div>
					</div>
				</a>
				<ul class="mui-table-view mui-table-view-chevron">
					<li th:each="salelist:${salelist}" th:if="${salelist.time==everyMoth.time}" class="mui-table-view-cell" style="background-color:#f0f1ff">
						<!--<a href="javascript:void(0);"  class="weui-cells ">-->
								<div class="weui-media-box__bd">
									<div class="weui-flex">
										<div class="weui-flex__item" style="flex-grow: 10">
											<h4 class="weui-media-box__title" style="font-size: 15px;">
												<span th:text="${salelist.servitemname}"></span>
											</h4>
											<div class="weui-flex">
												<div class="weui-flex__item">
													<span class="weui-media-box__desc" th:text="${salelist.carno}"></span>
												</div>
												<div class="weui-flex__item">
													<span class="weui-media-box__desc" th:text="${#dates.format(salelist.completetime, 'yyyy-MM-dd')}"></span>
												</div>
												<div class="weui-flex__item">
													<span class="weui-media-box__desc" th:if="${salelist.type=='已结算'}" th:text="${salelist.type}"></span>
													<span th:if="${salelist.type!='已结算'}" style="color: red" class="weui-media-box__desc" th:text="${salelist.type}"></span>
												</div>
											</div>


										</div>
										<div class="weui-flex__item" style="flex-grow: 1">
											<h4>￥<span th:text="${salelist.reward}"></span></h4>
										</div>
									</div>


								</div>
								<!--<div class="weui-cell__ft"></div>-->
						<!--</a>-->
					</li>

				</ul>
			</li>
		</ul>
	</div>
	<div class="weui-cells__title" align="center">没有再多内容啦</div><!--没有再多内容啦-->
</div>

</body>
<style>
	.mui-table-view-cell {
		position: relative;
		overflow: hidden;
		padding: 5px 11px;
		padding-left: 0px;
		-webkit-touch-callout: none;
	}
	.mui-table-view-chevron .mui-table-view-cell {
		padding-right: 55px;
	}
</style>
<script>
/*选择状态*/
$("#type").select({
    title: "选择状态",
    items: [
        {
            title: "所有",
            value: "0",
        },
        {
            title: "已结算",
            value: "1",
        },
        {
            title: "未结算",
            value: "2",
        }
    ],
    onClose: function (result) {
        console.log(result.data.values);/*获取选中的值*/
		var type=result.data.values;
		location.href="/sale/myPerformance?type="+type;
    },
});

/*选择时间段*/
$("#choocetime").select({
    title: "选择时间段",
    items: [
        {
            title: "本日",
            value: "0",
        },
        {
            title: "本月",
            value: "1",
        },
        {
            title: "近三个月",
            value: "2",
        }
    ],
    onClose: function (result) {
        console.log(result.data.values);/*获取选中的值*/
        var choocetime=result.data.values;
        location.href="/sale/myPerformance?choocetime="+choocetime;
    },
});
</script>
</html>
